<template>
    <!-- block4 -->
    <div class="block4">
        <div class="max-width w-full flex gap-[30px]">
            <div class="text-[#fff] text-[43px] font-bold pt-[98px] basis-1/2">加入数百万人的社区</div>
            <div class="flex flex-col justify-center gap-[50px] basis-1/2">
                <div class="flex flex-col justify-center gap-[4px]">
                    <div>
                        <span class="block4-text1">29.7M</span>
                    </div>
                    <div class="text-gray-400 text-[20px]">个活跃账户</div>
                </div>
                <div class="flex flex-col justify-center gap-[4px]">
                    <div>
                        <span class="block4-text2">340M+</span>
                    </div>
                    <div class="text-gray-400 text-[20px]">个 NFT 被铸造</div>
                </div>
                <div class="flex flex-col justify-center gap-[4px]">
                    <div>
                        <span class="block4-text3">$0.00064</span>
                    </div>
                    <div class="text-gray-400 text-[20px]">每笔交易的平均成本</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.block4 {
    --at-apply: h-[730px] bg-[#121212] flex justify-center;
}
.block4-text1 {
    --at-apply: text-[96px] text-[transparent];
    background-image: linear-gradient(100.51deg, #f087ff 27.61%, #6e1fce 62.14%, rgba(110, 31, 206, 0.1) 100%);
    background-clip: text;
}
.block4-text2 {
    --at-apply: text-[96px] text-[transparent];
    background-image: linear-gradient(100.22deg, #1fcff1 30.11%, #234cb6 66.43%, rgba(35, 76, 182, 0.1) 120.76%);
    background-clip: text;
}
.block4-text3 {
    --at-apply: text-[96px] text-[transparent];
    background-image: linear-gradient(97.65deg, #19fb9b 11.36%, #199890 54.3%, #005f59 100.78%);
    background-clip: text;
}
</style>
